<template>
    <!-- <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">后台管理系统</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.userName" placeholder="username">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="password" v-model="ruleForm.passWord" @keyup.enter.native="submitForm('ruleForm')">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
                <p class="login-tips">Tips : 用户名和密码随便填随便填。</p>
            </el-form>
        </div>
    </div> -->

    <div class="login-container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">

      <div class="title-container">
        <div class="logoImg">
          <img src="../../assets/img/logo.png" alt="">
          <h3 class="title">河南省老干部大学</h3>
        </div>
        <span>远程互动教学系统</span>    
      </div>

      <el-form-item prop="userName">
        <!-- <span class="svg-container">
          <svg-icon icon-class="user" />
        </span> -->
        <el-input
          ref="userName"
          v-model="ruleForm.userName"
          placeholder="请输入用户名"
          name="userName"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>

      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
        <el-form-item prop="passWord">
          <!-- <span class="svg-container">
            <svg-icon icon-class="password" />
          </span> -->
          <el-input
            :key="passwordType"
            ref="passWord"
            v-model="ruleForm.passWord"
            :type="passwordType"
            placeholder="请输入密码"
            name="passWord"
            tabindex="2"
            autocomplete="on"
          />
          <!-- <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span> -->
        </el-form-item>
      </el-tooltip>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click="handleLogin('ruleForm')">登录</el-button>

    </el-form>

  </div>
</template>

<script>
// 导入 登录接口、主菜单接口
import {login,getMenu} from '@/api/user'

    export default {
        data: function(){
            return {
                // 账户信息
                ruleForm: {
                    userName: 'systemadmin',
                    passWord: '2019~~~~',
                    timeSpan: parseInt((new Date().getTime() / 1000).toString(), 10),
                },
                // 验证规则
                loginRules: {
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    passWord: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
                passwordType: 'password',
                capsTooltip: false,
                loading: false,
                showDialog: false,
                redirect: undefined,
                otherQuery: {}
            }
        },
        methods: {
            // 点击登录按钮
            handleLogin(formName) {
                // 表单预验证
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 调用登录接口
                        login(this.ruleForm).then(res => {
                            if(res.code==1){
                                this.$message.success(res.message);
                                // 将token保存到本地存储中
                                // token 只应在当前网站打开期间有效，所以将token保存在sessionStorage中
                                sessionStorage.setItem('token',res.data.token);
                                // 进入首页
                                this.$router.push('/dashboard')
                            }else{
                                this.$message.error(res.message);
                            }
                        }).catch(error => {
                            // reject(error)
                        })


                        // localStorage.setItem('ms_username',this.ruleForm.username);
                        // this.$router.push('/');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
.login-container {
    width: 400px;
    margin: 0 auto;
    margin-top: 100px;
}

.title-container {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
  }
.logoImg{
    display: flex;
    align-items: center;
    justify-content: center;
}
.logoImg>img{
    width: 44px;
    height: 44px;
    margin-right: 10px;
}
.title {
    font-size: 33px;
    font-weight: bold;
}
    /* .login-wrap{
        position: relative;
        width:100%;
        height:100%;
        background-image: url(../../assets/img/login-bg.jpg);
        background-size: 100%;
    }
    .ms-title{
        width:100%;
        line-height: 50px;
        text-align: center;
        font-size:20px;
        color: #000;
        border-bottom: 1px solid #ddd;
    }
    .ms-login{
        position: absolute;
        left:50%;
        top:50%;
        width:350px;
        margin:-190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255,255,255, 1);
        overflow: hidden;
    }
    .ms-content{
        padding: 30px 30px;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
        margin-bottom: 10px;
    }
    .login-tips{
        font-size:12px;
        line-heigh:#000;
    } */
</style>